<template>
	<view class="goshop-wallet-container">
		<view class="goshop-wallet-head">
			<view class="goshop-wallet-head-warp">
				<view class="goshop-wallet-head-top"></view>
				<view class="goshop-wallet-head-body">
					<view class="text-color-white">{{walletbalanceText}}</view>
					<view class="price-color u-m-t-10">{{moneyText}}{{memberInfo.money}}</view>
				</view>
				<view class="goshop-wallet-head-info">
					<view class="row-cen-cen flex-1 text-color-white" @tap="$Router.push({ path: '/pages/common/wallet/recharge'})">{{onlinerechargeText}}</view>
					<view class="row-cen-cen flex-1 text-color-white">|</view>
					<view class="row-cen-cen flex-1 text-color-white" @tap="$Router.push({ path: '/pages/common/wallet/withdraw'})">{{changecashText}}</view>
				</view>
			</view>
		</view>
		<view class="goshop-wallet-body">
			<view class="goshop-wallet-body-record">
				<view>{{transactionrecordText}}</view>
				<view class="row-cen-cen" @tap="$Router.push({ path: '/pages/common/wallet/record'})">
					{{moreText}}
					<view class="iconfont iconfont-right_arrow"></view>
				</view>
			</view>
		</view>
		<view class="goshop-wallet-footer">
			<!-- 空白页 -->
			<u-empty v-if="isEmpty === true && walletDataList.length === 0" :text="emptyText" mode="list"></u-empty>
			<view class="goshop-wallet-list" v-for="(item,index) in walletDataList" :key="index" @tap="$Router.push({ path: '/pages/common/wallet/info', query: {  id: item.id}})">
				<view class="goshop-wallet-list-left">
					<view class="goshop-wallet-list-left-name">
						<!-- 未认证 -->
						<view v-if="memberInfo.authStatus === 0" class="row-x">
							<view v-if="item.tradeType === 1">{{buyText}}：</view>
							<view v-if="item.tradeType === 2">{{rechargeText}}：</view>
							<view v-if="item.tradeType === 3">{{withdrawText}}：</view>
						</view>
						<!-- 认证 -->
						<view v-else class="row-x">
							<view v-if="item.tradeType === 1">{{orderText}}：</view>
							<view v-if="item.tradeType === 2">{{rechargeText}}：</view>
							<view v-if="item.tradeType === 3">{{withdrawText}}：</view>
						</view>
						<view v-if="item.tradeType === 1">{{item.orderGoodInfo.goodName}}</view>
						<view v-else>{{item.payAmount}}</view>
					</view>
					<view class="goshop-wallet-list-left-content">{{item.createTime}}</view>
				</view>
				<view class="goshop-wallet-list-right">
					<view class="row-x">
						<!-- 未认证 -->
						<view v-if="memberInfo.authStatus === 0" class="row-x">
							<view v-if="item.tradeType === 1">-</view>
							<view v-if="item.tradeType === 2">+</view>
							<view v-if="item.tradeType === 3">-</view>
						</view>
						<!-- 认证 -->
						<view v-else class="row-x">
							<view v-if="item.tradeType === 1">+</view>
							<view v-if="item.tradeType === 2">+</view>
							<view v-if="item.tradeType === 3">-</view>
						</view>
						{{item.payAmount}}
					</view>
					<view class="iconfont iconfont-right_arrow"></view>
				</view>
			</view>
		</view>
		<u-loadmore
				:status="loadStatus" 
				:loading-text="loadingText" 
				:loadmore-text="loadmoreText" 
				:nomore-text="nomoreText" 
				loadingIcon="semicircle"
				@loadmore="getWalletPage"
			/>
	</view>
</template>

<script>
	import { mapState, mapActions, mapGetters } from 'vuex';
	import {walletPage} from '@/common/http.api.js'
	import jwt from '@/utils/jwt.js'
	export default {
		data() {
			return {
				//加载更多标志
				loadMoreFlag:false,
				isEmpty:false,
				loadStatus: 'loadmore',
				loadingText: '',
				loadmoreText: '',
				nomoreText: '',
				emptyText:'',
				moreText:'',
				buyText:'',
				walletDataList:[],
				isLogin: false,
				walletbalanceText:'',
				onlinerechargeText:'',
				withdrawText:'',
				changecashText:'',
				rechargeText:'',
				orderText:'',
				transactionrecordText:'',
				moneyText:'',
				params: {
					pageNo: 1,
					status:10,
					pageSize: 10,
				},
			};
		},
		onReachBottom() {
			if(this.loadMoreFlag){
			  this.getWalletPage()
			}
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.walletDataList = []
			this.getWalletPage()
		},
		onLoad(){
				
		},
		async onShow(){
		  this.refresh();
		  this.isLogin ? await this.getMemberInfo() : this.resetMemberInfo();
		  this.getWalletPage();
		},
		computed: {
			...mapGetters(['memberInfo'])
		},
		methods:{
			...mapActions(['getMemberInfo','resetMemberInfo']),
			refresh(){
				this.isLogin = jwt.getLogin();
				this.emptyText = this.$t('common.empty.text');
				this.loadingText = this.$t('common.loading.text');
				this.loadmoreText = this.$t('common.loadmore.text');
				this.nomoreText = this.$t('common.nomore.text');
				this.moreText = this.$t('common.more.text');
				this.buyText = this.$t('common.buy.text');
				this.rechargeText = this.$t('common.recharge.text');
				this.withdrawText = this.$t('common.withdraw.text');
				this.orderText = this.$t('common.order.text');
				
				this.walletbalanceText = this.$t('wallet.walletbalance.text');
				this.onlinerechargeText = this.$t('wallet.onlinerecharge.text');
				this.changecashText = this.$t('wallet.changecash.text');
				this.transactionrecordText = this.$t('wallet.transactionrecord.text');
				this.moneyText = this.$t('common.money.text');
			},
			getWalletPage(){
				this.loadStatus = 'loading';
				walletPage(this.params).then((res)=>{
					uni.stopPullDownRefresh()
					if(res.code === 0){
					  if(res.data.list.length === 0){
						this.isEmpty = true;
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  }else if (res.data.list.length < 10) {
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  } else {
						this.params.pageNo++;
						this.loadStatus = 'loading'
						this.loadMoreFlag = true;
					  }
					  if (this.params.pageNo > 1) {
						this.walletDataList = this.walletDataList.concat(res.data.list);
					  } else {
						this.walletDataList = res.data.list;
					  }
					}
				  }).catch(error=>{
					console.error(error)
				  })
			},
		}
	}
</script>

<style lang="scss">
.goshop-wallet-container{
	.goshop-wallet-head{
		padding: 20rpx;
		.goshop-wallet-head-warp{
			height: 200rpx;
			background-color: $goshop-color-primary;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.goshop-wallet-head-top{
				height: 30rpx;
			}
			.goshop-wallet-head-body{
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				flex: 1;
			}
			.goshop-wallet-head-info{
				background-color: $goshop-color-auxiliary-one;
				height: 70rpx;
				width: 100%;
				border-radius: 0 0 10px 10px;
				z-index: 1000;
				//opacity: 0.2;
				background-color: rgba(255,255,255,0.2);
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

	}
	.goshop-wallet-body{
		background-color: $goshop-color-auxiliary-one;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		.goshop-wallet-body-record{
			padding: 20rpx 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.goshop-wallet-footer{
		padding: 0 20rpx;
		.goshop-wallet-list{
			border-radius: 10px;
			background-color: $goshop-color-auxiliary-one;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			.goshop-wallet-list-left{
				flex: 3;
				.goshop-wallet-list-left-name{
					display: flex;
				}
				.goshop-wallet-list-left-content{
					margin-top: 10rpx;
					color: $goshop-text-color-three;
				}
			}
			.goshop-wallet-list-right{
				display: flex;
				align-items: center;
				justify-content: center;
				color: $goshop-text-color-three;
			}
		}
	}
}
</style>
